//默认菜单
.site-menubar {
    z-index: $zindex-navbar - 1;
    position: fixed;
    top: 66px;
    left: 0;
    width: $menubar-width;
    height: 100%;
    height: -webkit-calc(100% - 66px);
    height: calc(100% - 66px);
    background: #fff;
    transition: width 300ms;
    @include box-shadow(0 2px 4px rgba(0, 0, 0, .08));
    ul {
        list-style: none;
        padding-left: 0;
    }
    .site-menubar-body {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        height: -webkit-calc(100% - 76px);
        height: calc(100% - 76px);
    }
    .site-menubar-footer {
        position: absolute;
        display: flex;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 76px;
        text-align: center;
        background: #e4eaec;
        >a {
            display: block;
            float: left;
            width: 33.33333333%;
            height: 76px;
            padding: 26px 0;
            color: #76838f;
            font-size: 16px;
        }
        >a:hover {
            background: darken(#e4eaec, 3%);
        }
    }
}
// 菜单
// ##
.menu {
    //菜单分类
    //##
    //
    .menu-item-category {
        position: relative;
        padding-left: 30px;
        padding-right: 30px;
        margin-top: 5px;
        line-height: $menu-item-height;
        .menu-category-op {
            display: inline-block;
            position: absolute;
            right: 15px;
            width: 30px;
            text-align: center;
            a {
                color: $menu-item-color;
                &:hover {
                    color: $menu-item-hover-color;
                }
            }
        }
    }
    //菜单项
    //##
    //
    .menu-item {
        position: relative;
        display: block;
        line-height: $menu-item-height;
        width: $menubar-width;
        transition: width 300ms;
        .menu-link {
            display: block;
            padding-left: 50px;
            padding-right: 30px;
            color: $menu-item-color;
        }
        .menu-link:hover {
            background: $menu-item-hover-bg;
            text-decoration: none;
        }
        .menu-title {
            display: inline-block;
            margin-left: 18px;
        }
        .menu-arrow {
            display: inline-block;
            float: right;
        }
        .menu-title-fold {
            display: none;
            color: $menu-item-color;
            line-height: 60px;
        }
        &.active {
            .menu-link {
                color: $menu-item-hover-color;
                background: $menu-item-hover-bg;
                text-decoration: none;
            }
        }
    }
    //一行多菜单
    .menu-group {
        @include clearfix();
        padding-left: 40px;
        padding-right: 30px;
        .menu-item {
            width: 49%;
            width: calc(50% - 3px);
            width: -webkit-calc(50% - 3px);
            float: left;
            padding-left: 2px;
            padding-right: 5px;
            >a {
                color: $menu-item-color;
            }
            >a:hover {
                background: $menu-item-hover-bg;
                text-decoration: none;
            }
            >a:focus {
                color: $menu-item-hover-color;
                background: $menu-item-hover-bg;
                text-decoration: none;
            }
            .menu-title {
                margin-left: 0;
                font-size: 12px;
            }
        }
        //两个特殊的菜单
        .menu-item.all-order {
            margin-right: 4px;
            border-bottom: 2px solid $brand-primary;
        }
        .menu-item.warn-order {
            position: relative;
            border-bottom: 2px solid #fb6d67;
            &.has-warn:after {
                position: absolute;
                top: 10px;
                right: 0;
                display: block;
                content: '';
                height: 10px;
                width: 10px;
                background: #fb6d67;
                border-radius: 10px;
            }
        }
    }
    //子菜单
    .submenu {
        display: none;
        width: $menubar-width;
        .menu-item {
            line-height: $submenu-item-height;
            .menu-title {
                margin-left: 32px;
            }
        }
    }
    .menu-item.open {
        color: $menu-item-hover-color;
        background: $menu-item-hover-bg;
        text-decoration: none;
    }
    .menu-item.open .submenu {
        display: block;
    }
}
//菜单折叠
.menubar-fold .site-menubar {
    width: $menubar-width-fold;
    transition: width 300ms;
    .site-menubar-footer {
        >a {
            width: 100%;
        }
        >a.setting,
        >a.logout {
            display: none;
        }
    }
    .menu {
        .menu-item-category {
            display: none;
        }
        .menu-item-diviser {
            display: block;
            border-bottom: 1px solid $gray-lighter;
        }
        .menu-item {
            height: 60px;
            width: $menubar-width-fold;
            line-height: 60px;
            text-align: center;
            transition: width 300ms;
            .menu-title-fold {
                display: block;
            }
            .menu-link {
                display: none;
            }
            .menu-group {
                display: none;
            }
            .menu-title-fold:hover,
            .menu-title-fold:focus {
                background: $menu-item-hover-bg;
            }
        }
        .menu-item.open {
            .menu-link {
                display: block;
                position: absolute;
                left: 90px;
                top: 0;
                width: 260px;
                padding: 0 40px;
                text-align: left;
                background: $menu-item-hover-bg;
                .menu-icon {
                    display: none;
                }
                .menu-title {
                    margin-left: 0;
                }
                .menu-arrow {
                    display: none;
                }
            }
            //一行多菜单
            .menu-group {
                display: block;
                position: absolute;
                left: 90px;
                top: 0;
                width: 260px;
                padding: 0 40px;
                background: $menu-item-hover-bg;
                .menu-item {
                    width: 100%;
                    text-align: left;
                    line-height: 47px;
                    .menu-icon {
                        display: none;
                    }
                    .menu-arrow {
                        display: none;
                    }
                    .menu-title {
                        font-size: 14px;
                    }
                }
                //两个特殊的菜单
                .menu-item.all-order {
                    margin-right: 0;
                    border-bottom: none;
                }
                .menu-item.warn-order {
                    border-bottom: none;
                    &:after {
                        display: none;
                    }
                }
            }
        }
    }
    //二级菜单变化
    .submenu {
        position: absolute;
        top: 0;
        left: 90px;
        background: $submenu-bg;
        .menu-item {
            text-align: left;
            .menu-title {
                display: block;
                margin-left: 0;
            }
        }
    }
}
